(function (a) {
  class Box {
    constructor(args) {
      this.style = args.style || {}
      this.elParent = args.elParent
      this.imgSrc = args.imgSrc
      this.render();
    }
    create() {
      const elDiv = document.createElement("div");
      elDiv.style.transformStyle = 'preserve-3d';
      elDiv.style.position = "absolute"
      //  for (let i in this.style) { elDiv.style[i] = this.style[i] }
      // elDiv.style.height = this.style.height || "40px"
      // elDiv.style.width = this.style.width || "40px"
      elDiv.style.transition = this.style.transition || "10s"
      const width = document.body.clientWidth
      const height = document.body.clientHeight
      elDiv.style.top = this.style.top || `${height / 4 + Math.random() * height / 9}px`
      elDiv.style.left = this.style.left || `${width / 2.3 + Math.random() * width / 10}px`
      const elImg = document.createElement('img')
      elImg.style.transform = 'scale(0.1)'
      elImg.style.width = this.style.width || "35px"
      elImg.style.height = this.style.height || "35px"
      elImg.style.borderRadius = "50%"
      elImg.style.transition = this.style.transition || "10s"
      elImg.src = this.imgSrc[Math.ceil(Math.random() * (this.imgSrc.length - 1))]
      elDiv.appendChild(elImg)
      this.elImg = elImg
      this.el = elDiv
    }
    append() {
      this.elParent.appendChild(this.el)
    }
    animate() {
      //const translate3dZ = 500 + Math.random() * 500
      // const translate3dX = 100 + Math.ceil(Math.random() * 100) - (Math.random() * 400)
      // const translate3dY = 100 + Math.ceil(Math.random() * 400) - (Math.random() * 1200)
      const elImg = this.el.childNodes
      setTimeout(() => {
        this.elImg.style.transform = 'scale(0.5)'
        this.el.style.transform =
          ` scaleX(0.001)
            scaleY(0.001)
            translate3d(
            0px,
            0px, 
            ${ 500 + Math.random() * 500}px)  
         `
      }, 10)
    }
    destroy() {
      const timer = setTimeout(() => {
        this.elParent.removeChild(this.el)
        delete this
        clearTimeout(timer)
      }, 8 * 1000)
    }
    parentElInit() {
      const bar = this.elParent.parentNode
      bar.style.overflow = "hidden"
      bar.style.perspective = '800px'
      bar.style.transformStyle = "preserve-3d"
      this.elParent.style.transformStyle = "preserve-3d"
      this.elParent.style.perspective = "1200px"
      this.elParent.style.position = "relative"
    }
    render() {
      this.parentElInit()
      this.create()
      this.append()
      this.animate()
      //this.time()
      this.destroy()
    }
  }
  a.Box = Box
})(window);